iT邦幫忙

2021 iThome 鐵人賽

DAY 24
0
Mobile Development

使用 Swift 和公開資訊,打造投資理財的 Apps系列 第 25

D24 - 用 Swift 和公開資訊,打造投資理財的 Apps { 台股成交量實作.4 }

  • 分享至 

  • xImage
  •  

"軟體開發和蓋教堂一樣,當完成之後,我們就開始祈禱" - Sam Redwine

在上一篇,我們遇到了預料之外的開發者日常「有 bug!」。大盤走勢在沒有設定顏色的狀況下,漂漂亮亮的。沒想到一把顏色加上去,整個圖被壓縮到無法識別的程度,現在要找出問題,把他修正回來。

https://ithelp.ithome.com.tw/upload/images/20211003/20140622StObMpA3dS.png

在這邊直接列出我試過的步驟,就不一一試範了。

  • 懷疑是 chart 是被貼上 vc 的 UIView container 後 layout 跑掉,換成直接在 vc 拿到 ChartView → 失敗
  • 懷疑是 CombinedChart 不正常,所以改成用 BarChartView → 失敗
  • 懷疑是 Storyboard IBOutlet 可能設定不正常,直接改用程式碼生出一個 ChartView 然後設定 auto layout → 失敗
  • 懷疑 K 棒數量不夠多,所以再多拉三個月的資料 → 失敗
  • 懷疑設單一顏色,但非預設顏色可以再現 bug → 失敗,單一顏色都不會有問題。
  • 懷疑動到 axis 的 max, min,不斷的重新設定
  • 懷疑台股成交在數千億,這個數字太大了,所以把每一個 bar 除以1億 → 失敗

最後,我先試著把顏色調成只有四個。

https://ithelp.ithome.com.tw/upload/images/20211003/20140622BX6rrvpcoy.png

就發現…顏色在4個的時候,就正常,但是右邊開始變窄了,因為右上方要放顏色代表的數值資料。

那…如果把右上方的東西,全部拿掉,會不會空間就出來了呢?

右上方的屬性,在 Charts 為 legend,在 setupCombinedChartView() 那邊,將原來的 legend 設為 enable = false

private func setupCombinedChartView(_ chartView: CombinedChartView) {
        
        chartView.dragEnabled = false
        chartView.setScaleEnabled(true)
        chartView.maxVisibleCount = 1000
        chartView.pinchZoomEnabled = true
        
        chartView.legend.enabled = false //關掉這個,右上方的 legend 的空間就會被釋放出來
        
        chartView.leftAxis.labelFont = UIFont.systemFont(ofSize: 10)
        chartView.leftAxis.spaceTop = 0.3
        chartView.leftAxis.spaceBottom = 0.3
        chartView.leftAxis.axisMinimum = 0
        
        chartView.rightAxis.enabled = false
        
        chartView.xAxis.labelPosition = .bottom
        chartView.xAxis.labelFont = UIFont.systemFont(ofSize: 10)
        chartView.xAxis.labelCount = 10
    }

這樣,就得到正確的圖了

https://ithelp.ithome.com.tw/upload/images/20211003/2014062260aqaIoMXI.png

再稍微調整一下,現在的量,太高了,所以會把綠色的 K 棒也蓋住。先調成右方軸為最大值的 10 倍。

private func updateVolumeMaxMin(_ chartView: BarLineChartViewBase, dataSet: BarChartDataSet) {
        
        let max = dataSet.yMax
        chartView.rightAxis.axisMaximum = max * 10
    }

把這一段放在 updateMaxMin

func updateWithMALine(stockSticks: [StockKLine], volumeDataList: [TwMarketTradingInfo], combinedView: UIView) {
        
        if let combinedView = combinedView as? CombinedChartView {
            
            let ma5DataSet = getMALineData(stockSticks: stockSticks, range: 5, color: .blue)
            let ma10DataSet = getMALineData(stockSticks: stockSticks, range: 10, color: .red)
            let ma20DataSet = getMALineData(stockSticks: stockSticks, range: 20, color: .systemOrange)
            
            let lineData = LineChartData(dataSets: [ma5DataSet, ma10DataSet, ma20DataSet])
            let candleData = getCandleData(stockSticks: stockSticks)
            let barData = getVolumeBarData(volumeDataList: volumeDataList)
            
            let combinedData = CombinedChartData()
            combinedData.lineData = lineData
            combinedData.candleData = candleData
            combinedData.barData = barData
            
            combinedView.data = combinedData
            
            // 這邊有優化空間,請讀者自行優化
            let candleDataEntry = convert(stockStick: stockSticks)
            let dataSet = convert(dataEntry: candleDataEntry)
            updateMaxMin(combinedView, dataSet: dataSet)
            
						// 調整右方 y 軸
            if let barDataSet = barData.dataSets.first as? BarChartDataSet {
                updateVolumeMaxMin(combinedView, dataSet: barDataSet)
            }
            
            let indexDateLabels = getIndexDateLabels(from: stockSticks)
            updateXAxis(combinedView, indexDateLabels: indexDateLabels)
        }
    }

完成的成品如下

https://ithelp.ithome.com.tw/upload/images/20211003/20140622V5b368DGu8.png

台股申購日曆
IT鐵人賽Demo App

下方是這次 D1 ~ D12 的完成品,可以下載來試
App Store - 台股申購日曆

https://ithelp.ithome.com.tw/upload/images/20210924/20140622ypOBM0tgrZ.png


上一篇
D23 - 用 Swift 和公開資訊,打造投資理財的 Apps { 台股成交量實作.3 }
下一篇
D25 - 用 Swift 和公開資訊,打造投資理財的 Apps { 三大法人成交比重 資料分析 }
系列文
使用 Swift 和公開資訊,打造投資理財的 Apps37
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言